<template>
    <div id="trading">
        <!-- 头部 -->
        <div class="top fs-12">
            <div class="total-center">
                <div
                    class="total-money col-f dis-flex flex-dir-column flex-x-between"
                >
                    <p>总交易金额</p>
                    <p style="font-family: 'D-DIN">
                        <span>￥</span>
                        <span class="fs-26 fw-700">{{
                            $utils.func.splitNumber(summary.grossTransaction?summary.grossTransaction:0)[0]
                        }}</span>
                        <span>.{{ $utils.func.splitNumber(summary.grossTransaction?summary.grossTransaction:0)[1] }}</span>
                    </p>
                </div>
                <div class="total-detail col-1A dis-flex">
                    <div
                        class="dis-flex flex-y-center flex-dir-column flex-x-center"
                    >
                        <p>本月交易</p>
                        <p style="font-family: 'D-DIN">
                            <span>￥</span>
                            <span class="fs-26 fw-700">{{
                                $utils.func.splitNumber(summary.monthlyTurnover?summary.monthlyTurnover:0)[0]
                            }}</span>
                            <span>.{{ $utils.func.splitNumber(summary.monthlyTurnover?summary.monthlyTurnover:0)[1] }}</span>
                        </p>
                    </div>
                    <div
                        class="dis-flex flex-y-center flex-dir-column flex-x-center"
                    >
                        <p>总计返现</p>
                        <p style="font-family: 'D-DIN">
                            <span>￥</span>
                            <span class="fs-26 fw-700">{{
                                $utils.func.splitNumber(summary.totalCashBack?summary.totalCashBack:0)[0]
                            }}</span>
                            <span>.{{ $utils.func.splitNumber(summary.totalCashBack?summary.totalCashBack:0)[1] }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 总计 -->
        <div class="total fs-14 mt-16 fw-500 dis-flex flex-x-between">
            <div class="year-month dis-flex col-3 flex-x-between flex-y-center">
                <span @click="showPicker = true">{{
                    $utils.func.formatYMDate(tradingTime)
                }}</span>
                <img src="../../../assets/img/Filter_down.svg" alt="" />
            </div>
            <div class="dis-flex flex-y-center" v-if="false">
                <div class="mr-9">
                    <span>月交易：</span>
                    <span style="font-family: 'D-DIN" class="col-3">0.00</span>
                </div>
                <div class="dis-flex flex-y-center">
                    <span>月返现：</span>
                    <span style="font-family: 'D-DIN" class="col-3">0.00</span>
                </div>
            </div>
        </div>

        <!-- 列表 -->
        <div class="list" v-if="!loadData">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="loadMore"
                class="list"
                :offset="100"
                :immediate-check="false"
                v-if="list.length !== 0"
            >
                <div
                    v-for="(item, index) in list"
                    :key="index"
                    class="list-item dis-flex flex-y-start"
                >
                    <div>
                        <img src="../../../assets/img/daijika@1x.svg" alt="" />
                    </div>
                    <div class="flex-box">
                        <div class="dis-flex col-3 flex-x-between mb-12">
                            <p class="fs-16 fw-500">
                                {{ item.merchantCardType }}
                            </p>
                            <p style="font-family: 'D-DIN" class="fs-12 fw-700">
                                <span>￥</span>
                                <span class="fs-14">{{item.merchantTransactionAmount}}</span>
                            </p>
                        </div>
                        <div class="fs-12 dis-flex flex-x-between">
                            <p>
                                {{ $utils.func.formatTime(item.tradeTime) }}
                            </p>
                            <p class="earnings" v-if="false">+15.00</p>
                        </div>
                    </div>
                </div>
            </van-list>
            <van-empty v-else description="暂无内容" />
        </div>

        <div v-else class="load">
            <van-loading color="#F53137" />
        </div>

        <!-- 选择器 -->
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
                v-model="tradingTime"
                type="year-month"
                title="选择年月"
                :formatter="formatter"
                @confirm="onConfirm"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'trading',
        data() {
            return {
                showPicker: false,
                tradingTime: new Date(),
                minDate: new Date(),
                maxDate: new Date(),
                size: 5,
                current: 1,
                loading: true,
                finished: false,
                loadData: true,
                list: [],
                summary: {}
            }
        },
        methods: {
            formatter(type, val) {
                if (type === 'year') {
                    return `${val}年`;
                } else if (type === 'month') {
                    return `${val}月`;
                }
                return val;
            },
            onConfirm(value) {
                this.tradingTime = value
                this.showPicker = false
                this.list = []
                this.getList()
            },
            getList() {
                let data = this.$store.state.app.defaultEquipment
                console.log("交易页获取设备信息", data);
                const { size, current, tradingTime } = this;
                this.$toast.clear()

                // 函数来处理日期格式化
                const formatDateTime = (date) => {
                    return date ? this.$utils.func.formatYearMonth(new Date(date)) : null;
                };

                let params = {
                    size,
                    current,
                    machinePrimaryId: data.id,
                    queryMonth: formatDateTime(tradingTime)
                };
                // 删除空字符串参数
                for (let key in params) {
                    if (params[key] === "" || params[key] === null) {
                        delete params[key];
                    }
                }
                console.log("携带参数", params);
                this.$api.app.tradingListApi(params).then((res) => {
                    console.log("获取列表结果", res);
                    this.loadData = false
                    // 上拉加载
                    if (res.data?.records) {
                        this.list = [...this.list, ...res.data.records];
                    }
                    this.loading = false;   // 加载状态结束
                    if (this.list.length == res.data.total || res.data?.records?.length === 0) {
                        this.finished = true;
                    }
                    this.loading = false
                }).catch((err) => {
                    console.log("err", err);
                    this.$toast(err.message)
                });
            },
            getSummary() {
                let data = this.$store.state.app.defaultEquipment
                let params = {
                    machinePrimaryId: data.id,
                };
                this.$api.app.tradingSummaryApi(params).then((res) => {
                    console.log("获取统计结果", res);
                    this.summary = res.data
                }).catch((err) => {
                    console.log("err", err);
                    this.$toast(err.message)
                });
            },
            loadMore() {
                // 异步更新数据
                console.log("加载数据");
                if (this.refreshing) {
                    this.current = 1
                } else {
                    this.current++
                    this.getList();
                }
            },
        },
        computed: {},
        watch: {},
        created() {
            // 获取过去十二个月的日期
            var minDate = new Date();
            minDate.setMonth(minDate.getMonth() - 12);

            // 将minDate设置为过去十二个月
            this.minDate = minDate;
        },
        mounted() {
            this.getSummary()
            this.getList()
        },
    }
</script>
    
<style scoped lang='scss'>
    .empty {
        padding-top: 90px;
    }
    .top {
        width: 100%;
        height: 216px;
        background: url("../../../assets/img/Transaction_background.png");
        background-size: 100% 100%;
        padding: 16px;
        box-sizing: border-box;

        .total-center {
            background: url("../../../assets/img/Transaction_Card.png");
            width: 344px;
            height: 200px;
            background-size: 100% 100%;
            border-radius: 10px;
        }

        .total-money {
            width: 100%;
            height: 50%;
            padding: 24px 24px 14px;
            box-sizing: border-box;
        }
        .total-detail {
            width: 100%;
            height: 50%;

            & > div {
                width: 50%;
                box-sizing: border-box;
                & > p:nth-child(1) {
                    margin-bottom: 10px;
                }
            }
        }
    }

    .total {
        padding: 0 24px;
        box-sizing: border-box;
        color: #989898;
        .year-month {
            & > img {
                width: 15px;
                height: 8px;
                margin-left: 2px;
            }
            & > span {
                line-height: 12px;
            }
        }
    }

    .load {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
    }

    .list {
        min-height: 300px;
        .list-item {
            width: 344px;
            height: 88px;
            margin: 16px auto 0;
            background: #ffffff;
            border-radius: 6px;
            padding: 24px 24px 0;
            box-sizing: border-box;
            color: #989898;
            & > div:nth-child(1) {
                height: 100%;
                font-size: 0;
                margin-right: 16px;
                & > img {
                    width: 24px;
                    height: 24px;
                }
            }
            .earnings {
                font-weight: 700;
                font-size: 14px;
                color: #ff8610;
                line-height: 14px;
                font-family: "D-DIN";
            }
        }
    }
</style>